import JQuery from 'jquery';
import util from '@/js/util/util.js';
import postion from '@/js/store/postion.js';
import store from '@/js/store/map/index.js';
import shortcut from '@/js/main/shortcut.js';
import Vue from 'vue';

let attribute = {
    setAttribute: function(element) {
        if (element.style.top) {
            this.setValue(this.getTopValueName(), util.isBlank(element.style.top.value) ? '' : element.style.top.value);
            this.setValue(this.getTopUnitName(), element.style.top.unit);
        }
        if (element.style.left) {
            this.setValue(this.getLeftValueName(), util.isBlank(element.style.left.value) ? '' : element.style.left.value);
            this.setValue(this.getLeftUnitName(), element.style.left.unit);
        }
        if (element.style.bottom) {
            this.setValue(this.getBottomValueName(), util.isBlank(element.style.bottom.value) ? '' : element.style.bottom.value);
            this.setValue(this.getBottomUnitName(), element.style.bottom.unit);
        }
        if (element.style.right) {
            this.setValue(this.getRightValueName(), util.isBlank(element.style.right.value) ? '' : element.style.right.value);
            this.setValue(this.getRightUnitName(), element.style.right.unit);
        }
        if (element.style.width) {
            this.setValue(this.getWidthValueName(), util.isBlank(element.style.width.value) ? '' : element.style.width.value);
            this.setValue(this.getWidthUnitName(), element.style.width.unit);
        }
        if (element.style.height) {
            this.setValue(this.getHeightValueName(), util.isBlank(element.style.height.value) ? '' : element.style.height.value);
            this.setValue(this.getHeightUnitName(), element.style.height.unit);
        }
        if (element.style.opacity) {
            this.setValue(this.getOpacityName(), element.style.opacity);
        }
        if (element.style.borderStyle) {
            this.setValue(this.getBorderStyleName(), element.style.borderStyle);
        }
        this.setValue(this.getBorderWidthValueName(), element.style.borderWidth);
        if (element.style.borderRadius) {
            this.setValue(this.getBorderRadiusValueName(), util.isBlank(element.style.borderRadius.value) ? '' : element.style.borderRadius.value);
            this.setValue(this.getBorderRadiusUnitName(), element.style.borderRadius.unit);
        }
        if (element.style.boxShadow) {
            this.setValue(this.getBoxShadowLevelName(), element.style.boxShadow.level);
            this.setValue(this.getBoxShadowVerticalName(), element.style.boxShadow.vertical);
            this.setValue(this.getBoxShadowBlurName(), element.style.boxShadow.blur);
            this.setValue(this.getBoxShadowSpreadName(), element.style.boxShadow.spread);
        }
        if (!element.style.hasOwnProperty('backdropFilter')) {
            Vue.set(element.style, 'backdropFilter', 0);
        }
        if (!element.style.hasOwnProperty('filter')) {
            Vue.set(element.style, 'filter', 0);
        }
        this.setValue(this.getBackdropFilterName(), element.style.backdropFilter);
        this.setValue(this.getFilterName(), element.style.filter);
        this.setValue(this.getRotateName(), element.style.rotate);
    },
    setValue: function(id, value) {
        let obj = JQuery('#' + id);
        obj.val(value);
    },
    getTopValueName: function() {
        return window.getRootName() + 'STYLE_TOP_VALUE';
    },
    getLeftValueName: function() {
        return window.getRootName() + 'STYLE_LEFT_VALUE';
    },
    getHeightValueName: function() {
        return window.getRootName() + 'STYLE_HEIGHT_VALUE';
    },
    getWidthValueName: function() {
        return window.getRootName() + 'STYLE_WIDTH_VALUE';
    },
    getBottomValueName: function() {
        return window.getRootName() + 'STYLE_BOTTOM_VALUE';
    },
    getRightValueName: function() {
        return window.getRootName() + 'STYLE_RIGHT_VALUE';
    },
    getTopUnitName: function() {
        return window.getRootName() + 'STYLE_TOP_UNIT';
    },
    getLeftUnitName: function() {
        return window.getRootName() + 'STYLE_LEFT_UNIT';
    },
    getHeightUnitName: function() {
        return window.getRootName() + 'STYLE_HEIGHT_UNIT';
    },
    getWidthUnitName: function() {
        return window.getRootName() + 'STYLE_WIDTH_UNIT';
    },
    getBottomUnitName: function() {
        return window.getRootName() + 'STYLE_BOTTOM_UNIT';
    },
    getRightUnitName: function() {
        return window.getRootName() + 'STYLE_RIGHT_UNIT';
    },
    getRotateName: function() {
        return window.getRootName() + 'STYLE_ROTATE';
    },
    getOpacityName: function() {
        return window.getRootName() + 'STYLE_OPACITY';
    },
    getBorderStyleName: function() {
        return window.getRootName() + 'STYLE_BORDERSTYLE';
    },
    getBorderWidthValueName: function() {
        return window.getRootName() + 'STYLE_BORDERWIDTH_VALUE';
    },
    getBackdropFilterName: function() {
        return window.getRootName() + 'STYLE_BACKDROPFILTER';
    },
    getFilterName: function() {
        return window.getRootName() + 'STYLE_FILTER';
    },
    getBorderRadiusValueName: function() {
        return window.getRootName() + 'STYLE_BORDERRADIUS_VALUE';
    },
    getBorderRadiusUnitName: function() {
        return window.getRootName() + 'STYLE_BORDERRADIUS_UNIT';
    },
    getBoxShadowLevelName: function() {
        return window.getRootName() + 'STYLE_BOXSHADOW_LEVEL';
    },
    getBoxShadowVerticalName: function() {
        return window.getRootName() + 'STYLE_BOXSHADOW_VERTICAL';
    },
    getBoxShadowBlurName: function() {
        return window.getRootName() + 'STYLE_BOXSHADOW_BLUR';
    },
    getBoxShadowSpreadName: function() {
        return window.getRootName() + 'STYLE_BOXSHADOW_SPREAD';
    },
    validateBox: function(element) {
        let success = [];
        if (element) {
            let i = 0;
            let j = 0;
            if (util.isBlank(element.style.left.value)) {
                i ++;
            }
            if (util.isBlank(element.style.width.value)) {
                i ++;
            } else if (element.style.width.value < 0) {
                success.push(3);// 宽度小于0
            }
            if (util.isBlank(element.style.right.value)) {
                i ++;
            }
            if (util.isBlank(element.style.top.value)) {
                j ++;
            }
            if (util.isBlank(element.style.height.value)) {
                j ++;
            } else if (element.style.height.value < 0) {
                success.push(4);// 高度小于0
            }
            if (util.isBlank(element.style.bottom.value)) {
                j ++;
            }
            if (i != 1) {
                success.push(1);// 缺少横向参数
            }
            if (j != 1) {
                success.push(2);// 缺少纵向参数
            }
        } else {
            success.push(0);// 对象为空
        }
        return success;
    },
    setTopValue: function(element, height, value, updateInput = true) {
        if (util.isNotBlank(value) && util.isNumber(value)) {
            if (util.isBlank(element.style.height.value) || util.isBlank(element.style.bottom.value)) {
                if (element.style.top.unit == '%') {
                    element.style.top.value = util.toDouble3(value);
                } else if (element.style.top.unit == 'px') {
                    element.style.top.value = util.toInteger(value);
                }
                postion.setVerticalPixel(element, height);
                (updateInput) && this.setValue(this.getTopValueName(), element.style.top.value);
            } else {
                this.setValue(this.getTopValueName(), '');
            }
            updateInput && this.setValue(this.getTopUnitName(), element.style.top.unit);
        } else {
            element.style.top.value = '';
            this.setValue(this.getTopValueName(), '');
        }
        shortcut.changeBoxGroup(element);
    },
    setLeftValue: function(element, width, value, updateInput = true) {
        if (util.isNotBlank(value) && util.isNumber(value)) {
            if (util.isBlank(element.style.width.value) || util.isBlank(element.style.right.value)) {
                if (element.style.left.unit == '%') {
                    element.style.left.value = util.toDouble3(value);
                } else if (element.style.left.unit == 'px') {
                    element.style.left.value = util.toInteger(value);
                }
                postion.setHorizontalPixel(element, width);
                (updateInput) && this.setValue(this.getLeftValueName(), element.style.left.value);
            } else {
                this.setValue(this.getLeftValueName(), '');
            }
            updateInput && this.setValue(this.getLeftUnitName(), element.style.left.unit);
        } else {
            element.style.left.value = '';
            this.setValue(this.getLeftValueName(), '');
        }
        shortcut.changeBoxGroup(element);
    },
    setHeightValue: function(element, height, value, updateInput = true) {
        if (util.isNotBlank(value) && util.isNumber(value)) {
            if (util.isBlank(element.style.top.value) || util.isBlank(element.style.bottom.value)) {
                if (element.style.height.unit == '%') {
                    element.style.height.value = util.toDouble3(value);
                } else if (element.style.height.unit == 'px') {
                    element.style.height.value = util.toInteger(value);
                }
                postion.setVerticalPixel(element, height);
                (updateInput) && this.setValue(this.getHeightValueName(), element.style.height.value);
            } else {
                this.setValue(this.getHeightValueName(), '');
            }
            updateInput && this.setValue(this.getHeightUnitName(), element.style.height.unit);
        } else {
            element.style.height.value = '';
            this.setValue(this.getHeightValueName(), '');
        }
        shortcut.changeBoxGroup(element);
    },
    setWidthValue: function(element, width, value, updateInput = true) {
        if (util.isNotBlank(value) && util.isNumber(value)) {
            if (util.isBlank(element.style.left.value) || util.isBlank(element.style.right.value)) {
                if (element.style.width.unit == '%') {
                    element.style.width.value = util.toDouble3(value);
                } else if (element.style.width.unit == 'px') {
                    element.style.width.value = util.toInteger(value);
                }
                postion.setHorizontalPixel(element, width);
                (updateInput) && this.setValue(this.getWidthValueName(), element.style.width.value);
            } else {
                this.setValue(this.getWidthValueName(), '');
            }
            updateInput && this.setValue(this.getWidthUnitName(), element.style.width.unit);
        } else {
            element.style.width.value = '';
            this.setValue(this.getWidthValueName(), '');
        }
        shortcut.changeBoxGroup(element);
    },
    setBottomValue: function(element, height, value, updateInput = true) {
        if (util.isNotBlank(value) && util.isNumber(value)) {
            if (util.isBlank(element.style.top.value) || util.isBlank(element.style.height.value)) {
                if (element.style.bottom.unit == '%') {
                    element.style.bottom.value = util.toDouble3(value);
                } else if (element.style.bottom.unit == 'px') {
                    element.style.bottom.value = util.toInteger(value);
                }
                postion.setVerticalPixel(element, height);
                (updateInput) && this.setValue(this.getBottomValueName(), element.style.bottom.value);
            } else {
                this.setValue(this.getBottomValueName(), '');
            }
            updateInput && this.setValue(this.getBottomUnitName(), element.style.bottom.unit);
        } else {
            element.style.bottom.value = '';
            this.setValue(this.getBottomValueName(), '');
        }
    },
    setRightValue: function(element, width, value, updateInput = true) {
        if (util.isNotBlank(value) && util.isNumber(value)) {
            if (util.isBlank(element.style.left.value) || util.isBlank(element.style.width.value)) {
                if (element.style.right.unit == '%') {
                    element.style.right.value = util.toDouble3(value);
                } else if (element.style.right.unit == 'px') {
                    element.style.right.value = util.toInteger(value);
                }
                postion.setHorizontalPixel(element, width);
                (updateInput) && this.setValue(this.getRightValueName(), element.style.right.value);
            } else {
                this.setValue(this.getRightValueName(), '');
            }
            updateInput && this.setValue(this.getRightUnitName(), element.style.right.unit);
        } else {
            element.style.right.value = '';
            this.setValue(this.getRightValueName(), '');
        }
    },
    setTopPixel: function(element, height, pix, updateInput = true) {
        element.style.top.pixel = util.toInteger(pix);
        postion.setVerticalValue(element, height);
        (!util.isBlank(element.style.top.value) && updateInput) && this.setValue(this.getTopValueName(), element.style.top.value);
        (!util.isBlank(element.style.bottom.value) && updateInput) && this.setValue(this.getBottomValueName(), element.style.bottom.value);
    },
    setLeftPixel: function(element, width, pix, updateInput = true) {
        element.style.left.pixel = util.toInteger(pix);
        postion.setHorizontalValue(element, width);
        (!util.isBlank(element.style.left.value) && updateInput) && this.setValue(this.getLeftValueName(), element.style.left.value);
        (!util.isBlank(element.style.right.value) && updateInput) && this.setValue(this.getRightValueName(), element.style.right.value);
    },
    setHeightPixel: function(element, height, pix, updateInput = true) {
        element.style.height.pixel = util.toInteger(pix);
        postion.setVerticalValue(element, height);
        (!util.isBlank(element.style.height.value) && updateInput) && this.setValue(this.getHeightValueName(), element.style.height.value);
        (!util.isBlank(element.style.bottom.value) && updateInput) && this.setValue(this.getBottomValueName(), element.style.bottom.value);
    },
    setWidthPixel: function(element, width, pix, updateInput = true) {
        element.style.width.pixel = util.toInteger(pix);
        postion.setHorizontalValue(element, width);
        (!util.isBlank(element.style.width.value) && updateInput) && this.setValue(this.getWidthValueName(), element.style.width.value);
        (!util.isBlank(element.style.right.value) && updateInput) && this.setValue(this.getRightValueName(), element.style.right.value);
    },
    setTopUnit: function(element, height, unit = 'px', updateInput = true) {
        if (util.isNotBlank(element.style.top.value)) {
            if (unit == '%') {
                element.style.top.value = util.toDouble3(postion.pixelToPercent(element.style.top, height));
            } else if (unit == 'px') {
                element.style.top.value = util.toInteger(postion.percentToPixel(element.style.top, height));
            }
        }
        element.style.top.unit = unit;
        updateInput && this.setValue(this.getTopUnitName(), element.style.top.unit);
        !util.isBlank(element.style.top.value) && this.setValue(this.getTopValueName(), element.style.top.value);
    },
    setLeftUnit: function(element, width, unit = 'px', updateInput = true) {
        if (util.isNotBlank(element.style.left.value)) {
            if (unit == '%') {
                element.style.left.value = util.toDouble3(postion.pixelToPercent(element.style.left, width));
            } else if (unit == 'px') {
                element.style.left.value = util.toInteger(postion.percentToPixel(element.style.left, width));
            }
        }
        element.style.left.unit = unit;
        updateInput && this.setValue(this.getLeftUnitName(), element.style.left.unit);
        !util.isBlank(element.style.left.value) && this.setValue(this.getLeftValueName(), element.style.left.value);
    },
    setHeightUnit: function(element, height, unit = 'px', updateInput = true) {
        if (util.isNotBlank(element.style.height.value)) {
            if (unit == '%') {
                element.style.height.value = util.toDouble3(postion.pixelToPercent(element.style.height, height));
            } else if (unit == 'px') {
                element.style.height.value = util.toInteger(postion.percentToPixel(element.style.height, height));
            }
        }
        element.style.height.unit = unit;
        updateInput && this.setValue(this.getHeightUnitName(), element.style.height.unit);
        !util.isBlank(element.style.height.value) && this.setValue(this.getHeightValueName(), element.style.height.value);
    },
    setWidthUnit: function(element, width, unit = 'px', updateInput = true) {
        if (util.isNotBlank(element.style.width.value)) {
            if (unit == '%') {
                element.style.width.value = util.toDouble3(postion.pixelToPercent(element.style.width, width));
            } else if (unit == 'px') {
                element.style.width.value = util.toInteger(postion.percentToPixel(element.style.width, width));
            }
        }
        element.style.width.unit = unit;
        updateInput && this.setValue(this.getWidthUnitName(), element.style.width.unit);
        !util.isBlank(element.style.width.value) && this.setValue(this.getWidthValueName(), element.style.width.value);
    },
    setBottomUnit: function(element, height, unit = 'px', updateInput = true) {
        if (util.isNotBlank(element.style.bottom.value)) {
            if (unit == '%') {
                element.style.bottom.value = util.toDouble3(postion.pixelToPercent(element.style.bottom, height));
            } else if (unit == 'px') {
                element.style.bottom.value = util.toInteger(postion.percentToPixel(element.style.bottom, height));
            }
        }
        element.style.bottom.unit = unit;
        updateInput && this.setValue(this.getBottomUnitName(), element.style.bottom.unit);
        !util.isBlank(element.style.bottom.value) && this.setValue(this.getBottomValueName(), element.style.bottom.value);
    },
    setRightUnit: function(element, width, unit = 'px', updateInput = true) {
        if (util.isNotBlank(element.style.right.value)) {
            if (unit == '%') {
                element.style.right.value = util.toDouble3(postion.pixelToPercent(element.style.right, width));
            } else if (unit == 'px') {
                element.style.right.value = util.toInteger(postion.percentToPixel(element.style.right, width));
            }
        }
        element.style.right.unit = unit;
        updateInput && this.setValue(this.getRightUnitName(), element.style.right.unit);
        !util.isBlank(element.style.right.value) && this.setValue(this.getRightValueName(), element.style.right.value);
    },
    setRotate: function(element, value, updateInput = true) {
        if (value === '') {
            if (element.style.rotate !== '') {
                store.commit('setValidateHistory', { type: 'style.rotate', value: element.style.rotate });
            } else {
                store.commit('setValidateHistory', { type: 'style.rotate', value: '' });
            }
        } else {
            store.commit('setValidateHistory',{ type: 'style.rotate', value: '', flag: true });
        }
        element.style.rotate = Number(value);
        updateInput && this.setValue(this.getRotateName(), value);
    },
    setOpacity: function(element, value, updateInput = true) {
        element.style.opacity = +value;
        updateInput && this.setValue(this.getOpacityName(), value);
    },
    setBorderStyle: function(element, value, updateInput = true) {
        element.style.borderStyle = value;
        updateInput && this.setValue(this.getBorderStyleName(), element.style.borderStyle);
    },
    setBorderWidthValue: function(element, value, updateInput = true) {
        if (value === '') {
            if (element.style.borderWidth !== '') {
                store.commit('setValidateHistory', { type: 'style.borderWidth', value: element.style.borderWidth });
            } else {
                store.commit('setValidateHistory', { type: 'style.borderWidth', value: 0 });
            }
        } else {
            store.commit('setValidateHistory',{ type: 'style.borderWidth', value: '', flag: true });
        }
        element.style.borderWidth = value;
        updateInput && this.setValue(this.getBorderWidthValueName(), value);
    },
    setBorderRadiusValue: function(element, value, updateInput = true) {
        if (util.isNotBlank(value) && util.isNumber(value)) {
            if (element.style.borderRadius.unit == '%') {
                element.style.borderRadius.value = util.toDouble3(value);
            } else if (element.style.borderRadius.unit == 'px') {
                element.style.borderRadius.value = util.toInteger(value);
            }
            (updateInput) && this.setValue(this.getBorderRadiusValueName(), element.style.borderRadius.value);
            store.commit('setValidateHistory',{ type: 'style.borderRadius.value', value: '', flag: true });
        } else {
            if (value === '') {
                if (element.style.borderRadius.value !== '') {
                    store.commit('setValidateHistory', { type: 'style.borderRadius.value', value: element.style.borderRadius.value });
                } else {
                    store.commit('setValidateHistory', { type: 'style.borderRadius.value', value: 0 });
                }
            }
            element.style.borderRadius.value = '';
            this.setValue(this.getBorderRadiusValueName(), '');
        }
    },
    setBorderRadiusUnit: function(element, unit = 'px', updateInput = true) {
        element.style.borderRadius.unit = unit;
        updateInput && this.setValue(this.getBorderRadiusUnitName(), element.style.borderRadius.unit);
        !util.isBlank(element.style.borderRadius.value) && this.setValue(this.getBorderRadiusValueName(), element.style.borderRadius.value);
    },
    setBackdropFilter: function(element, value) {
        if (value === '') {
            if (element.style.backdropFilter !== '') {
                store.commit('setValidateHistory', { type: 'style.backdropFilter', value: element.style.backdropFilter });
            } else {
                store.commit('setValidateHistory', { type: 'style.backdropFilter', value: 0 });
            }
        } else {
            store.commit('setValidateHistory',{ type: 'style.backdropFilter', value: '', flag: true });
        }
        element.style.backdropFilter = value;
    },
    setFilter: function(element, value) {
        if (value === '') {
            if (element.style.filter !== '') {
                store.commit('setValidateHistory', { type: 'style.filter', value: element.style.filter });
            } else {
                store.commit('setValidateHistory', { type: 'style.filter', value: 0 });
            }
        } else {
            store.commit('setValidateHistory',{ type: 'style.filter', value: '', flag: true });
        }
        element.style.filter = value;
    },
    setBorderColor: function(element, value) {
        element.style.borderColor =  util.isBlank(value) ? '#FFFFFFFF' : util.rgbaToHexColor(value);
    },
    setBackgroundColor: function(element) {
        element.style.backgroundImage.color.push('#FFFFFFFF');
    },
    deleteBackgroundColor: function(element, index) {
        element.style.backgroundImage.color.splice(index, 1);
    },
    setBackgroundImageColor: function(element, value, index) {
        element.style.backgroundImage.color[index] = util.isBlank(value)? '#FFFFFFFF' : util.rgbaToHexColor(value);
    },
    setBackgroundImageAagle: function(element, item) {
        element.style.backgroundImage.angle = item.value;
    },
    setBoxShadowColor: function(element, value) {
        element.style.boxShadow.color = util.isBlank(value) ? '#FFFFFFFF' : util.rgbaToHexColor(value);
    },
    setBoxShadowLevel: function(element, value, updateInput = true) {
        element.style.boxShadow.level = value;
        (updateInput) && this.setValue(this.getBorderRadiusValueName(), element.style.boxShadow.level);
    },
    setBoxShadowVertical: function(element, value, updateInput = true) {
        element.style.boxShadow.vertical = value;
        (updateInput) && this.setValue(this.getBorderRadiusValueName(), element.style.boxShadow.vertical);
    },
    setBoxShadowBlur: function(element, value, updateInput = true) {
        element.style.boxShadow.blur = value;
        (updateInput) && this.setValue(this.getBorderRadiusValueName(), element.style.boxShadow.blur);
    },
    setBoxShadowSpread: function(element, value, updateInput = true) {
        element.style.boxShadow.spread = value;
        (updateInput) && this.setValue(this.getBorderRadiusValueName(), element.style.boxShadow.spread);
    }
};

export default attribute;